// Node服务器
const express = require("express")
const Vue = require("vue")
const fs = require("fs")

// 创建express实例和Vue实例
const app = express()

// 创建渲染器(将vue实例作为参数传给renderer，渲染器就会返回Html)
// 简单来说，用渲染器渲染vue实例可以得到html


// createBundleRenderer可以根据两个打包完的Bundle（服务端、客户端）文件来动态生成渲染器
const {createBundleRenderer} = require ("vue-server-renderer")
// 1：
// （a）引入服务端的包
const serverBundle = require("../dist/server/vue-ssr-server-bundle.json")
// （b）引入客户端的清单
const clientmanifest = require("../dist/client/vue-ssr-client-manifest.json")

// 
// 2:创建渲染器
const renderer = createBundleRenderer(serverBundle,{
    runInNewContext:false,
    // 模板文件
    template:fs.readFileSync("../public/index.temp.html","utf-8"),
    clientmanifest
})

/// 中间件处理静态文件请求
app.use(express.static('../dist/client', {index: false}))
// app.use(express.static('../dist/client'))




// 将路由处理交给vue
app.get("*", async (req, res) => {
    try {
        const context = {
            url: req.url,
            title: 'ssr test'
        }
        // 1：renderer.renderToString()该方法可以异步的生成html内容
        // 2：需要传vue实例为参数
        const html = await renderer.renderToString(context);
        //将获得的html内容返回给前端
        res.send(html);
    } catch (error) {
      res.status(500).send("服务器内部错误");
    }
  });

app.listen(5000,()=>{
    console.log("服务器启动成功2")
})
